<template>
  <div class="all-rooms-status-page">
    <h2>所有会议室当前状态</h2>

    <div class="filter-categories">
      <button 
        v-for="category in categories"
        :key="category.value"
        :class="{ active: selectedCategory === category.value }"
        @click="selectedCategory = category.value"
      >
        {{ category.label }}
      </button>
    </div>

    <div v-if="loading" class="loading-message">加载中...</div>
    <div v-else-if="error" class="error-message">{{ error }}</div>
    <div v-else class="room-cards-container">
      <CurrentRoomStatusCard
        v-for="room in filteredRooms"
        :key="room.roomId"
        :room="room"
      />
      <p v-if="filteredRooms.length === 0" class="no-rooms-message">
        当前分类下没有会议室。
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { getRoomsNowStatus } from '@/apis/room';
import CurrentRoomStatusCard from '@/components/rooms/CurrentRoomStatusCard.vue';

const rooms = ref([]);
const loading = ref(true);
const error = ref(null);
const selectedCategory = ref('all'); // Default to 'all'

const categories = [
  { label: '全部', value: 'all' },
  { label: '已预约未支付', value: 0 },
  { label: '已支付未使用', value: 1 },
  { label: '已支付使用中', value: 5 },
  { label: '空闲', value: 6 },
  { label: '待维修和维修中', value: 7 },
];

const filteredRooms = computed(() => {
  if (selectedCategory.value === 'all') {
    return rooms.value;
  }
  return rooms.value.filter(room => room.paymentStatus === selectedCategory.value);
});

onMounted(async () => {
  try {
    const response = await getRoomsNowStatus();
    if (response.code === 200) {
      rooms.value = response.data;
    } else {
      error.value = response.msg || '获取会议室状态失败';
    }
  } catch (err) {
    error.value = '加载会议室数据时发生错误: ' + err.message;
    console.error('Error fetching rooms now status:', err);
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped>
.all-rooms-status-page {
  padding: 2rem;
}

.filter-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1.5rem;
  justify-content: center;
}

.filter-categories button {
  padding: 0.8rem 1.4rem; /* Slightly larger padding */
  border: 1px solid #3498db; /* Use a more vibrant blue, consistent with new card blue */
  border-radius: 25px; /* More rounded pills */
  background-color: #fff;
  color: #3498db;
  cursor: pointer;
  font-size: 1.05rem; /* Slightly larger font */
  font-weight: 600; /* Semi-bold */
  transition: all 0.2s ease; /* Faster transition */
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow */
}

.filter-categories button:hover {
  background-color: #eaf4fc; /* Lighter hover background */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* More pronounced hover shadow */
}

.filter-categories button.active {
  background-color: #3498db;
  color: #fff;
  box-shadow: 0 3px 8px rgba(52, 152, 219, 0.4); /* Stronger shadow for active state */
}

.loading-message, .error-message, .no-rooms-message {
  text-align: center;
  margin-top: 2.5rem; /* Increased margin */
  font-size: 1.3rem; /* Slightly larger font */
  color: #7f8c8d; /* Muted gray */
}

.error-message {
  color: #e74c3c; /* Vibrant red for errors */
}

.room-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* Adjusted minmax to accommodate wider cards */
  gap: 2rem; /* Increased gap to match new card margin */
  margin-top: 2.5rem; /* Increased margin */
}
</style>
